<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>分类</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../libs/mui/mui.css">
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../libs/iconfont/fonts/iconfont.css" />
	</head>
	<body>
		<style>
			.mui-table-view{background-color:#efeff4;}
			.mui-table-view:after{height: 0;}
			.list{border:1px solid #e2e2e2;position: relative;height: 90px;background-color: #ffffff;padding: 10px;}
			.left-text{position: absolute;top: 50%;margin-top: -21px;}
			.right-text img{width: 25%;height: 75%;vertical-align: top;position: absolute;}
			.right-text img:nth-child(1){right: 50px; bottom: 0;}
			.right-text img:nth-child(2){right: 10px;bottom: 0;}
			.right-text img:nth-child(3){right:22px;bottom: 0;width: 35%;height: 90%;}
		</style>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
				<span>分类</span>
			</a>
			
			<a class="mui-pull-right" onclick="openNewPage('search.html')"><i class="mui-icon iconfont gray">&#xe600;</i></a>
		</header>
		<div class="mui-content">
			<div class="detail">
				<ul class="mui-table-view mui-grid-view">
		            <!--<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list" >
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<div class="list">
		            		<div class="left-text">
		            			小说
		            			<p>1000</p>
		            		</div>
		            		<div class="right-text">
		            			<img src="../public/img/6.jpg" />
		            			<img src="../public/img/3.jpg" />
		            			<img src="../public/img/5.jpg" />
		            		</div>
		            	</div>
		            </li>-->
		        </ul>
		    </div>    
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/open.js"></script>
		<script src="../libs/jquery/jquery.js"></script>
		<script type="text/javascript" src="../libs/jquery/jquery.js" ></script>
		<script type="text/javascript" src="../js/public.js" ></script>
		<script type="text/javascript" src="../js/app/classify.js" ></script>
		<script>
			mui.init({
				swipeBack: false
			});
			$(".mui-title>span").each(function(i){
				var $this=$(this)
				$this.on('tap',function(){
					$(".mui-title>span").removeClass('mui-lvs')
					$this.addClass('mui-lvs')
				})
			})
//			$(".detail .list").on('tap',function(){
//				openNewPage('classify-books.html');
//			})
		</script>
	</body>

</html>